<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>汽车列表</title>
    <base href="${basePath}">
    <link rel="stylesheet" href="static/plugins/layui/css/layui.css">
    <script src="static/plugins/jquery-3.1.0.js"></script>
    <script src="static/plugins/layui/layui.js"></script>
    <style>
        .required {
            color: red;
            margin: 0 5px
        }
    </style>
    <style>
        .upload-field{
            display: none;
        }
        .img-list{
            display: flex;
            flex-wrap: wrap;
        }
        .img-list .img-item{
            height: 120px;
            width: 120px;
            position: relative;
            margin: 10px;
        }
        .img-list .img-item:hover .img-opt{
            height: 100%;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background-color: rgba(0,0,0,.3);

            display: flex;
        }
        .img-list .img-item img{
            display: block;
            height: 100%;
            width: 100%;
        }
        .img-list .img-item .img-opt{
            height: 100%;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background-color: rgba(0,0,0,.3);
            display: none;
            align-items: center;
            justify-content: center;
        }
        .img-list .img-item .img-opt i{
            color: white;
            cursor: pointer;
            font-size: 26px;
            margin: 10px;
        }
    </style>
</head>
<body style="padding: 15px;">
<div class="layui-container">
    <form class="layui-form" id="dataForm" lay-filter="dataForm">
        <div class="layui-form-item">
            <label for="carNo" class="layui-form-label"><span class="required">*</span>车牌号</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input layui-inline" name="carNo" id="carNo" placeholder="请填车牌号"
                       lay-verify="required" lay-request="车牌号不能为空">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="color" class="layui-form-label"><span class="required">*</span>颜色</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input layui-inline" name="color" id="color" placeholder="请填写颜色"
                       lay-verify="required" lay-request="颜色不能为空">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="categoryId" class="layui-form-label"><span class="required">*</span>分类</label>
            <div class="layui-input-block">
                <select name="categoryId" id="categoryId" lay-verify="required" lay-request="分类必选">
                    <option value="">[选择分类]</option>
                    <c:forEach items="${categoryList}" var="category">
                        <option value="${category.id}">${category.name}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="imgs" class="layui-form-label"><span class="required">*</span>车况</label>
            <div class="layui-input-block">
                <input type="hidden" class="layui-input" name="imgs" id="imgs">
                <button type="button" class="layui-btn layui-bg-orange upload-btn" data-keys="imgs">上传图片</button>
                <fieldset class="layui-elem-field upload-field">
                    <div class="layui-field-box img-list"></div>
                </fieldset>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-filter="save" lay-submit>提交</button>
            </div>
        </div>
    </form>
</div>
</body>
<script>
    var form;
    const uploadImageInfo = {
        imgs:{
            list:[],
            size:4
        }
    }
    const dataId = sessionStorage.getItem("dataId") || "";
    $(function (){
        layui.use(function (){
            form = layui.form;
            let upload = layui.upload
            getFormData();
            getCategorySelect();
            form.on("submit(save)",function ({field}){
                $.ajax({
                    url:"car",
                    data:{
                        param:"update",
                        id:dataId,
                        ...field
                    },
                    method:"post",
                    dataType:"json",
                    success(res){
                        if(res.code === 200){
                            parent.layer.msg('操作成功！',{icon:6},function () {
                                let index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                                parent.table.reload('dataTable');
                            });
                        }else{
                            parent.layer.alert(res.msg)
                        }
                    }
                });
                return false;
            });

            upload.render({
                elem:".upload-btn",
                url:"upload",
                accept:"image",
                acceptMime:"image/*",
                size:1024*10,
                data:{
                    type:"car"
                },
                done(res){
                    if(res.code === 200){
                        let $parents = this.item.parents(".layui-form-item");
                        let key = this.item.data("key");
                        const list = uploadImageInfo[key].list;
                        const size = uploadImageInfo[key].size;
                        if(list.length >= size){
                            parent.layer.msg("最多上传["+size+"]张图片！",{icon:5});
                            return;
                        }
                        list.push(res.data.fileName);
                        setImage(list,$parents);
                    }
                }
            });
        })
    })

    function getCategorySelect(){
        $.ajax({
            url:"category",
            data:{
                param:"select",
            },
            method:"get",
            dataType:"json",
            success(res){
                if(res.code === 200){
                    let $html = '';
                    for(let cg of res.data){
                        $html += '<option value="'+cg.id+'">'+cg.name+'</option>';
                    }
                    $("#categoryId").empty().append($html);
                    form.render('select');
                    if(dataId){
                        $("#carNo").prop("readonly",true);
                        sessionStorage.removeItem("dataId");
                        $.ajax({
                            url:"car",
                            data:{
                                param:"info",
                                id:dataId
                            },
                            method: "get",
                            success(res) {
                                if(res.code === 200){
                                    form.val('dataForm',res.data);
                                }
                            }
                        })
                    }
                }
            }
        })
    }

    function setImage(list,$parents) {
        let $html = '';
        for (let imgName of list){
            $html +='<div class="img-item"><img src="'+imgName+'" alt=""><div class="img-opt"><i class="layui-icon layui-icon-eye" title="点击查看详情" onclick="showImg(\''+imgName+'\')"></i></div></div>';
        }
        $parents.find(".img-list").empty().append($html);
        $parents.find("input[type='hidden']").val(list);
        if(list.length>0){
            $parents.find(".upload-field").show();
        }else{
            $parents.find(".upload-field").hide();
        }
    }

    function getFormData() {
        if(dataId){
            sessionStorage.removeItem("dataId");
            $.ajax({
                url:"car",
                data:{
                    param:"info",
                    id:dataId
                },
                method: "get",
                success(res) {
                    if(res.code === 200){
                        form.val('dataForm',res.data);
                        let piList = res.data.carImgList.map(item=>item.src);
                        uploadImageInfo.imgs.list=[...piList];
                        let $imgsParents = $("#imgs").parents(".layui-form-item");
                        setImage(uploadImageInfo.imgs.list,$imgsParents);

                    }
                }
            })
        }
    }

    function showImg(imgSrc) {
        parent.layer.open({
            type:1,
            title:"图片详情",
            area:["500px","auto"],
            content:'<a href="'+imgSrc+'" title="点击查看原图" target="_blank"><img style="display: block;max-width: 100%;height: auto;" src="'+imgSrc+'"></a>'
        });
    }
</script>
</html>
